<template>
  <view class="searchfunction">
    <!-- 头部 -->
    <view class="header" :style="headerStyle">
      <view :style="'height: ' + statusBarHeight"> </view>
      <view class="header-info">
        <view class="title" :style="headerTextStyle">
          <view class="navleft">
            <image src="../../static/indexmore/in-back.png" @click="tosearch()" mode="" class="navleft-img"></image>
            <view class="navposition" :style="headerdingwei" @tap="get_Location()">
              {{CityName}}
            </view>
            <image src="../../static/index/gpsBlack.png" mode="" class="navleft-img"></image>
          </view>
          <view class="navcent">
            <u-search shape="round" height="25" bg-color="#FAFAFA" :show-action="false"></u-search>
          </view>
          <view class="navright">
            搜索
            <!-- <image src="../../static/index/bank.png" mode="" class="navright-imgone"></image>
            <image src="../../static/index/plus.png" mode="" class="navright-imgtwo"></image> -->
          </view>
        </view>
      </view>
      <view class="tab">
        <view class="tab-title">
          <view @click="checkIndex(1)" :class="navIndex==1?'active':'one'">热门</view>
          <view @click="checkIndex(2)" :class="navIndex==2?'active':'one'">功能</view>
          <view @click="checkIndex(3)" :class="navIndex==3?'active':'one'">产品</view>
          <view @click="checkIndex(4)" :class="navIndex==4?'active':'one'">生活</view>
          <view @click="checkIndex(5)" :class="navIndex==5?'active':'one'">消息</view>
        </view>
      </view>

    </view>
    <!-- 头部 -->
    <!-- tab栏切换 -->
    <view class="searchtab">
      <view v-show="navIndex==1" class="strokeBox">
        <view class="hot">
          <!-- 推荐 -->
          <view class="recommend">
            <view class="recommend-top">
              <view class="recommend-img1">
                <image src="../../static/search/people.png" class="img1" mode=""></image>
              </view>
              <view class="recommend-text">
                班克为您推荐
              </view>
              <view class="recommend-img2">
                <image src="../../static/search/bg2.png" class="img2" mode=""></image>
              </view>
            </view>
            <view class="recommend-button">
              <text class="text" @click="tomoney">
                住房公积金
              </text>
            </view>
          </view>
        </view>
        <!-- 推荐 -->
        <!-- 功能 -->
        <view class="function1">
          <view class="function-top">
            <view class="tit">
              功能
            </view>
            <view class="all">
              全部(13)
            </view>
          </view>
          <view class="function-con">
            <view class="for" v-for="(item,i) in functionList">

              <view class="left">
                <view class="img1">
                  <image :src="item.img" class="image"></image>
                </view>
                <view class="text">
                  {{item.text}}
                </view>
              </view>
              <view class="right">
                <image src="../../static/life/nav3jiantou.png" mode="" class="image1"></image>
              </view>
            </view>
          </view>
        </view>
        <!-- 功能 -->
        <!-- 基金 -->
        <view class="fund">
          <view class="function-top">
            <view class="tit">
              甚金/理财/存款
            </view>
            <view class="all">
              全部(1)
            </view>
          </view>
          <view class="fund-con">
            <view class="left">
              <view class="text1">
                0.00%
              </view>
              <view class="text2">
                月增长
              </view>
            </view>
            <view class="right">
              <view class="text3">
                华夏北京保障<text>房</text>REIT
              </view>
              <view class="text2">
                基础设施基金(REIT) |508068
              </view>
            </view>
          </view>
        </view>
        <!-- 基金 -->
        <!-- 信用卡 -->
        <view class="CreditCard">
          <view class="function-top">
            <view class="tit">
              信用卡
            </view>
            <view class="all">
              我的卡片
            </view>
          </view>
          <view class="CreditCard-con">
            <view class="img">
              <image src="../../static/search/xyk.png" mode="" class="image"></image>
            </view>
            <view class="text">
              <view class="text3">
                龙卡甬江青英信用卡
              </view>
              <view class="text2">
                住房商业贷款利率优惠
              </view>
            </view>
          </view>
        </view>
        <!-- 信用卡 -->
        <!-- 常见问题 -->
        <view class="question">
          <view class="function-top">
            <view class="tit">
              常见问题
            </view>
            <view class="all">
              全部(35)
            </view>
          </view>
          <view class="function-con">
            <view class="for" v-for="(item,i) in questionList">

              <view class="left">
                <view class="img1">
                  <!-- <image :src="it em.img" class="image"></image> -->
                </view>
                <view class="text">
                  {{item.text}}
                </view>
              </view>
              <view class="right">
                <image src="../../static/life/nav3jiantou.png" mode="" class="image1"></image>
              </view>
            </view>
          </view>
        </view>
        <!-- 常见问题 -->
        <!-- 底部 -->
        <view class="bottom">
          <view class="left">
            <view class="img">
              <image src="../../static/search/gth.png" class="image" mode=""></image>
            </view>
            <view class="text">
              没有搜索到满意的结果?
            </view>
          </view>
          <view class="rightbottom">
            <view class="textbottom">
              联系客服
            </view>
          </view>
        </view>
        <!-- 底部 -->
      </view>
      <view v-show="navIndex==2" class="strokeBox">
        <!-- 功能 -->
        <view class="function1">
          <view class="function-top">
            <view class="tit">
              功能
            </view>
            <view class="all">
              全部(13)
            </view>
          </view>
          <view class="function-con">
            <view class="for" v-for="(item,i) in functionList">

              <view class="left">
                <view class="img1">
                  <image :src="item.img" class="image"></image>
                </view>
                <view class="text">
                  {{item.text}}
                </view>
              </view>
              <view class="right">
                <image src="../../static/life/nav3jiantou.png" mode="" class="image1"></image>
              </view>
            </view>
          </view>
        </view>
        <!-- 功能 -->
        <!-- 微应用 -->
        <view class="function1">
          <view class="function-top">
            <view class="tit">
              微应用
            </view>
            <view class="all">
              全部(13)
            </view>
          </view>
          <view class="function-con">
            <view class="for" v-for="(item,i) in functionList">

              <view class="left">
                <view class="img1">
                  <image :src="item.img" class="image"></image>
                </view>
                <view class="text">
                  {{item.text}}
                </view>
              </view>
              <view class="right">
                <image src="../../static/life/nav3jiantou.png" mode="" class="image1"></image>
              </view>
            </view>
          </view>
        </view>
        <!-- 微应用 -->
        <!-- 底部 -->
        <view class="bottom">
          <view class="left">
            <view class="img">
              <image src="../../static/search/gth.png" class="image" mode=""></image>
            </view>
            <view class="text">
              没有搜索到满意的结果?
            </view>
          </view>
          <view class="rightbottom">
            <view class="textbottom">
              联系客服
            </view>
          </view>
        </view>
        <!-- 底部 -->
      </view>
      <view v-show="navIndex==3" class="strokeBox">
        <!-- 基金 -->
        <view class="fund">
          <view class="function-top">
            <view class="tit">
              甚金/理财/存款
            </view>
            <view class="all">
              全部(1)
            </view>
          </view>
          <view class="fund-con">
            <view class="left">
              <view class="text1">
                0.00%
              </view>
              <view class="text2">
                月增长
              </view>
            </view>
            <view class="right">
              <view class="text3">
                华夏北京保障<text>房</text>REIT
              </view>
              <view class="text2">
                基础设施基金(REIT) |508068
              </view>
            </view>
          </view>
        </view>
        <!-- 基金 -->
        <!-- 信用卡 -->
        <view class="CreditCard">
          <view class="function-top">
            <view class="tit">
              信用卡
            </view>
            <view class="all">
              我的卡片
            </view>
          </view>
          <view class="CreditCard-con">
            <view class="img">
              <image src="../../static/search/xyk.png" mode="" class="image"></image>
            </view>
            <view class="text">
              <view class="text3">
                龙卡甬江青英信用卡
              </view>
              <view class="text2">
                住房商业贷款利率优惠
              </view>
            </view>
          </view>
        </view>
        <!-- 信用卡 -->
        <!-- 底部 -->
        <view class="bottom">
          <view class="left">
            <view class="img">
              <image src="../../static/search/gth.png" class="image" mode=""></image>
            </view>
            <view class="text">
              没有搜索到满意的结果?
            </view>
          </view>
          <view class="rightbottom">
            <view class="textbottom">
              联系客服
            </view>
          </view>
        </view>
        <!-- 底部 -->
      </view>
      <view v-show="navIndex==4" class="strokeBox">
        <!-- 功能 -->
        <view class="function1">
          <view class="function-top">
            <view class="tit">
              功能
            </view>
            <view class="all">
              全部(13)
            </view>
          </view>
          <view class="function-con">
            <view class="for" v-for="(item,i) in functionList">

              <view class="left">
                <view class="img1">
                  <image :src="item.img" class="image"></image>
                </view>
                <view class="text">
                  {{item.text}}
                </view>
              </view>
              <view class="right">
                <image src="../../static/life/nav3jiantou.png" mode="" class="image1"></image>
              </view>
            </view>
          </view>
        </view>
        <!-- 功能 -->
        <!-- 底部 -->
        <view class="bottom">
          <view class="left">
            <view class="img">
              <image src="../../static/search/gth.png" class="image" mode=""></image>
            </view>
            <view class="text">
              没有搜索到满意的结果?
            </view>
          </view>
          <view class="rightbottom">
            <view class="textbottom">
              联系客服
            </view>
          </view>
        </view>
        <!-- 底部 -->
      </view>
      <view v-show="navIndex==5" class="strokeBox">5
      </view>
    </view>
    <!-- tab栏切换 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        CityName: '泰安市',
        scrollTop: 0,
        old: {
          scrollTop: 0
        },
        // 头
        appData: {},
        headerData: {
          bgColor: "",
          textColor: "",
          dingwei: "",
        },
        // 头
        navIndex: 1,
        functionList: [{
            img: "/static/search/zfgjj.png",
            text: "住房公积金"
          },
          {
            img: "/static/search/zfzx.png",
            text: "住房中心"
          },
          {
            img: "/static/search/zfgjj.png",
            text: "青岛住房公积金"
          },
          {
            img: "/static/search/hnszgjj.png",
            text: "河南省直公积金"
          }, {
            img: "/static/search/zdzfcx.png",
            text: "中德住房储蓄"
          },
        ],
        questionList: [{
            text: "住房储蓄是什么?"
          },
          {
            text: "住房储蓄贷款如何还款?"
          },
          {
            text: " 中德住房储蓄业务介绍?"
          },
        ]
      };
    },
    // 获取定位方法
    getLocationInfo() {
      let _this = this;
      uni.getLocation({
        type: 'gcj02',
        success(res) {
          let lat = res.latitude;
          let lng = res.longitude;
          let key =
            'M7XBZ-2TBKJ-TPBFS-KV3RM-F5QQF-OFFNV'; //申请地址：https://lbs.qq.com/dev/console/application/mine
          uni.request({
            url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng +
              '&key=' + key,
            method: "GET",
            success(ress) {
              let data = ress.data;
              let CityName = ress.data.result.address_component.city;
              _this.CityName = CityName
              uni.setStorage({
                key: 'City_Name',
                data: CityName
              });
            },
            fail() {
              uni.showToast({
                'title': '对不起，数据获取失败！',
                'icon': 'none'
              })
            }
          })
        },
        fail(res) {
          uni.showToast({
            'title': '对不起，获取位置失败！',
            'icon': 'none'
          })
        }
      })
    },

    computed: {
      navigationBarHeight() {
        return (this.appData.statusBarHeight * 2 + 88) + 'rpx'
      },
      statusBarHeight() {
        return (this.appData.statusBarHeight * 2 + 4) + 'rpx'
      },
      headerStyle() {
        return `height:${(this.appData.statusBarHeight * 2 + 88) + 'rpx'};background:${this.headerData.bgColor}`
      },
      headerTextStyle() {
        return `color:${this.headerData.textColor}`
      },
      headerdingwei() {
        return `color:${this.headerData.dingwei}`
      },
    },

    onShow() {
      const res = uni.getSystemInfoSync()
      this.appData = res;
    },

    onLoad() {
      let _this = this;
      uni.$on('getCityName', function(res) {
        _this.CityName = res
      });
    },
    methods: {
      tomoney() {
        uni.navigateTo({
          url: "/pages/index/money/money"
        })
      },
      tosearch() {
        uni.navigateBack({
          delta: 1
        })
      },
      onPageScroll(e) {
        if (e.scrollTop >= this.appData.statusBarHeight) {
          this.headerData.bgColor = '#fff'
          this.headerData.textColor = '#000'
          this.headerData.dingwei = '#000'
        } else {
          this.headerData.bgColor = ''
          this.headerData.textColor = ''
          this.headerData.dingwei = ''
        }
      },
      get_Location() {
        uni.navigateTo({
          url: '/pages/Location/Location'
        })
      },
      checkIndex(index) {
        this.navIndex = index
      },
    },
  }
</script>

<style lang="scss">
  page {
    background-color: #F5F7F7;
  }

  // 头部
  .header {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    // margin-top: 0rpx;
    transition: all .5s;
    background: rgba(255, 255, 255, 0);

    .header-info {
      // height: 88rpx;
      margin-top: 30rpx;

      .title {
        display: flex;
        width: 100vw;
        padding: 0 15rpx;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        transition: all .5s;

        .navleft {
          display: flex;
          width: 25vw;
          height: 50rpx;

          .navleft-img {
            padding: 10rpx 0;
            width: 20rpx;
            height: 30rpx;
          }

          .navposition {
            color: #000;
            font-weight: 520;
            font-size: 35rpx;
            padding-left: 8rpx;
            border: none;
            margin-right: 10rpx;
          }
        }

        .navcent {
          width: 50vw;
          height: 50rpx;
        }

        .navright {
          display: flex;
          justify-content: space-around;
          width: 20vw;
          height: 50rpx;
          color: #5381EE;
        }
      }

    }

    .tab {
      width: 100vw;
      padding-top: 20rpx;
      // border: 1px solid #000;
      // padding-top: 20rpx;
      margin: auto;
      background-color: #fff;

      .tab-title {
        display: flex;
        justify-content: space-around;
        margin-bottom: 20rpx;

        .active {
          font-size: 35rpx;
          padding-bottom: 10rpx;
          border-bottom: 2px solid #5381EE;
        }
      }
    }
  }

  // 头部
  // <!-- tab栏切换 -->
  .searchtab {
    width: 90vw;
    margin: auto;
    z-index: -10;
    // display: flex;
    margin-top: 190rpx;
  }

  .hot {
    box-sizing: border-box;
    width: 90vw;
    margin: auto;
  }

  // <!-- 推荐 -->
  .recommend {
    border-radius: 20rpx;
    background-color: #fff;
    padding-bottom: 80rpx;
    margin-bottom: 30rpx;

    .recommend-top {
      display: flex;
      position: relative;
      justify-content: space-between;
      padding-bottom: 50rpx;

      .recommend-img1 {
        // width: 15%;
        position: absolute;
        top: -20rpx;
        left: 0;
      }

      .img1 {
        width: 20vw;
        height: 18vw;
      }

      .img2 {
        width: 20vw;
        height: 15vw;
      }

      .recommend-img2 {
        // width: 20%;
      }

      .recommend-text {
        width: 80%;
        padding-top: 30rpx;
        font-weight: bold;
        // border: 1px solid #000;
        text-align: center;
      }
    }

    .recommend-button {
      text-align: center;

      .text {
        // border: 1px solid #000;
        padding: 30rpx;
        color: #5092C6;
        background-color: #F8F8F8;
        border-radius: 20rpx;
      }
    }
  }

  // <!-- 推荐 -->

  // <!-- 功能 -->
  .function1 {
    // border: 1px solid #000;
    border-radius: 20rpx;
    background-color: #fff;
    // padding-bottom: 80rpx;
    margin-bottom: 30rpx;
    padding: 20rpx 20rpx 0 20rpx;
    box-sizing: border-box;
  }

  .function-con {
    .for {
      margin-bottom: 25rpx;
      padding-bottom: 15rpx;
      border-bottom: 2rpx solid #888;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .for:last-child {
      border-bottom: none;
    }

    .left {
      display: flex;

      .image {
        width: 8vw;
        height: 4vh;
      }

    }

    .image1 {
      width: 3vw;
      height: 2vh;
    }

    .text {
      // align-items: center;
      margin-top: 10rpx;
      margin-left: 20rpx;

    }
  }

  // <!-- 功能 -->
  .function-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .tit {
      font-size: 35rpx;
      font-weight: bold;
    }

    .all {
      font-size: 25rpx;
      color: #888;
    }
  }

  // <!-- 基金 -->
  .fund {
    // border: 1px solid #000;
    border-radius: 20rpx;
    background-color: #fff;
    // padding-bottom: 80rpx;
    margin-bottom: 30rpx;
    padding: 20rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;

    .fund-con {
      display: flex;
      justify-content: space-between;
      // text-align: center;

      .text1 {
        font-size: 35rpx;
        color: #ccc;
        margin-bottom: 10rpx;
      }

      .text2 {
        color: #ccc;
        font-size: 24rpx;
      }

      .text3 {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 15rpx;
      }
    }
  }

  // <!-- 基金 -->
  // <!-- 信用卡 -->
  .CreditCard {
    // border: 1px solid #000;
    border-radius: 20rpx;
    background-color: #fff;
    // padding-bottom: 80rpx;
    margin-bottom: 30rpx;
    padding: 20rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;

    .CreditCard-con {
      display: flex;
      justify-content: space-between;

      .image {
        width: 45vw;
        height: 15vh;
      }

      .text {
        margin-top: 15rpx;
      }

      .text2 {
        color: #ccc;
        font-size: 24rpx;
      }

      .text3 {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 15rpx;
      }
    }
  }

  // <!-- 信用卡 -->
  // 常见问题

  // 常见问题
  .question {
    // border: 1px solid #000;
    border-radius: 20rpx;
    background-color: #fff;
    // padding-bottom: 80rpx;
    margin-bottom: 30rpx;
    padding: 20rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;

  }

  // 底部
  .bottom {
    // border: 1px solid #000;
    border-radius: 20rpx;
    background-color: #fff;
    // padding-bottom: 80rpx;
    margin-bottom: 30rpx;
    padding: 20rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      align-items: center;
      display: flex;

      .image {
        width: 15vw;
        height: 6vh;
      }

      .rightbottom {
        // border: 1px solid #ccc;
      }

      .textbottom {
        padding: 10rpx;
        border: 1px solid #ccc;
      }
    }
  }

  // 底部
  // 功能

  // 功能
  // <!-- tab栏切换 -->
</style>